<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>


  <script src="../js/jquery3.3.js"></script>
  <script>
    $(function () {
      let flag = false;
      let cyc = $('.cycle');
      let back = $('.container');
      cyc.mousedown(function () {
        console.log(1);
        flag = true;
      });
      cyc.mouseup(function () {
        console.log(2);
        flag = false;
      });
      back.mousemove(function (e) {
        if (flag) {
          cyc.offset({
            left: e.clientX - 25,
            top: e.clientY - 25
          });
        }
      });

      function tog() {

      }
    });
  </script>
  <style>
    .box {
      overflow: auto;
      width: 300px;
      height: 500px;
    }

    @media screen and (min-width: 600px) and (max-width: 900px) {
      .box {
        background: red;
      }
    }

    .box>ul>li {
      display: block;
    }

    .cycle {
      position: absolute;

      width: 50px;
      height: 50px;
      border-radius: 50%;
      background: red;
    }

    body {
      width: 1000px;
      height: 1000px;
      background: #ccc;
    }

    .container {
      width: 100%;
      height: 100%;
    }
  </style>
</head>

<body>
  <!-- <div class="box">
    <ul>
      <li>a</li>
      <li>b</li>
      <li>c</li>
    </ul>
  </div>
  <div class="box">
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
  </div> -->
  <div class="container">
    <div class="cycle"></div>
    <div style="width: 50px;height: 50px;border: 1px solid black;">
      asdfkjaksjdfkjaksdjfkjaksdjfk
      <span>asdfkjaksjdfkjaksdjfkjaksdjfk</span>
    </div>
  </div>
</body>

</html>